<template>
  <div class="overview-content">
    <el-row :gutter="32">
      <el-col :xs="24" :sm="24" :lg="24" style="margin-bottom: 20px">
        <div class="chart-wrapper inputTop">
          <el-row :gutter="32" class="rowPda">
            <el-col :xs="24" :sm="8" :lg="6" class="flex">
              <el-input
                v-model="listQuery.content"
                placeholder="请输入搜索内容"
                class="btnScr"
                :xs="24"
                :sm="12"
                :lg="16"
              />
              <el-button
                type="primary"
                icon="el-icon-search"
                class="btnScrright"
                :xs="24"
                :sm="12"
                :lg="8"
                @click="search"
              >搜索</el-button>
            </el-col>
            <el-col :xs="24" :sm="8" :lg="3" class="agg">
              <el-select
                v-model="listQuery.type"
                placeholder="请选择类型"
                class="btnScr"
                clearable
                @change="query"
              >
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-col>
            <el-col :xs="24" :sm="8" :lg="3" class="agg">
              <el-select
                v-model="listQuery.status"
                placeholder="请选择状态"
                class="btnScr"
                clearable
                @change="query"
              >
                <el-option
                  v-for="item in statusOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-col>
            <el-col :xs="24" :sm="8" :lg="3" class="agg">
              <el-date-picker
                v-model="listQuery.createdTime"
                type="date"
                placeholder="请选择注册时间"
                clearable
                @change="query"
              />
            </el-col>
            <el-col
              :xs="24"
              :sm="8"
              :lg="9"
              class="agg"
              style="text-align: right"
            >
              <el-button class="add" @click="add">新增</el-button>
            </el-col>
          </el-row>
        </div>
      </el-col>
    </el-row>

    <!---->
    <el-dialog
      title=""
      width="600px"
      custom-class="myDigo inputTop"
      :show-close="false"
      :visible.sync="show"
    >
      <h2>添加用户账号 <i class="el-icon-close" @click="close" /></h2>
      <!---->
      <div class="digoDiv">
        <el-form
          ref="form"
          :model="addUserList"
          label-width="85px"
          class="formDiv"
          :rules="rules"
        >
          <el-row :xs="24" :sm="24" :lg="24">
            <el-col :xs="12" :sm="11" :lg="11" class="">
              <el-form-item prop="mobile" label="账号:">
                <el-input
                  v-model.number="addUserList.mobile"
                  placeholder="请输入手机号"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :xs="24" :sm="24" :lg="24">
            <el-col :xs="11" :sm="11" :lg="11" class="">
              <el-form-item prop="type" label="类型:">
                <el-select
                  v-model="addUserList.type"
                  placeholder="请选择类型"
                  @change="(val) => owner(addUserList.type)"
                >
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :xs="11" :sm="11" :lg="11" class="">
              <el-form-item prop="name" label="姓名:" label-width="82px">
                <el-select
                  v-if="!isInput"
                  v-model="addUserList.name"
                  placeholder="请输入"
                  filterable
                >
                  <el-option
                    v-for="(it, i) in userName"
                    :key="i"
                    :label="it.name + '/' + it.mobile"
                    :value="it.name"
                  />
                </el-select>
                <el-input
                  v-else-if="isInput"
                  v-model="addUserList.name"
                  placeholder="请输入"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :xs="24" :sm="24" :lg="24">
            <el-col :xs="24" :sm="22" :lg="22" class="">
              <el-form-item label="备注:" label-width="85px">
                <el-input
                  v-model="addUserList.remark"
                  :rows="5"
                  type="textarea"
                  placeholder="请输入内容"
                  show-word-limit
                />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <!---->
      <div slot="footer" class="dialog-footer">
        <el-button
          :disabled="disabled"
          type="primary"
          @click="save"
        >保存</el-button>
        <el-button class="grey-btn" @click="close">取 消</el-button>
      </div>
    </el-dialog>
    <!---->
  </div>
</template>

<script>
import { addUsers } from '@/api/account'
import { page } from '@/api/manager'

export default {
  components: {},
  data() {
    return {
      show: false,
      input: '',
      value: '',
      disabled: true,
      options: [
        {
          label: '普通',
          value: 0
        },
        {
          label: '业主',
          value: 1
        },
        {
          label: '渠道',
          value: 2
        }
      ],
      statusOptions: [
        {
          label: '禁用',
          value: 0
        },
        {
          label: '有效',
          value: 1
        }
      ],
      addUserList: {
        name: null,
        remark: '',
        type: 1,
        mobile: ''
      },
      textarea: '',
      listQuery: {
        page: 1,
        limit: 10,
        status: null,
        type: null,
        createdTime: null,
        content: null
      },
      user: {
        page: 1,
        limit: 10000,
        type: 0
      },
      userName: [],
      filterName: [],
      isInput: false,
      rules: {
        mobile: [
          {
            required: true,
            message: '请输入正确手机号',
            trigger: 'blur',
            pattern: /^1[3-9][0-9]{9}$/
          }
        ],
        type: [
          {
            required: true,
            message: '请选择类型',
            trigger: 'blur'
          }
        ],
        name: [
          {
            required: true,
            message: '请选择或输入姓名',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  watch: {
    addUserList: {
      handler(newVal, oldVal) {
        var reg = /^1[3-9][0-9]{9}$/
        var r = newVal.mobile.toString().match(reg)
        if (r && newVal.mobile && newVal.name) {
          this.disabled = false
        } else {
          this.disabled = true
        }
      },
      deep: true
    }
  },
  async mounted() {
    var res = await page(this.user)
    this.userName = res.data.records
  },
  methods: {
    tofilterName(val) {
      console.log(val)
      this.filterName = this.userName.filter((item) => {
        return val ? item.name.includes(val) : true
      })
    },
    add() {
      this.show = true
    },
    owner(val) {
      if (val === 1) {
        this.isInput = false
        this.addUserList.name = ''
      } else {
        this.addUserList.name = ''
        this.isInput = true
      }
    },
    async save() {
      const { name } = this.addUserList
      const idItem = this.userName.find((item) => item.name === name)
      if (this.addUserList.type === 1) {
        delete this.addUserList.name
        await addUsers({ ...this.addUserList, managerId: idItem.id })
        this.$parent.$emit('addData', '')
        this.show = false
        this.close()
        return
      }
      await addUsers({ ...this.addUserList })
      this.$parent.$emit('addData', '')
      this.show = false
      this.close()
    },
    query() {
      this.listQuery.type =
        this.listQuery.type === '' ? null : this.listQuery.type
      this.$parent.$emit('searchData', this.listQuery)
    },
    search() {
      this.listQuery.type =
        this.listQuery.type === '' ? null : this.listQuery.type
      this.$parent.$emit('searchData', this.listQuery)
    },
    close() {
      this.show = false
      this.addUserList = {
        name: null,
        remark: '',
        type: 1,
        mobile: ''
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.add {
  background: #5ac6b7;
  color: #fff;
  border: 0;
  border-radius: 2px;
}
.flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-right: 8px !important;
}
.btnScr {
  width: 100%;
  margin-bottom: 15px;
}
::v-deep .btnScr input {
  border-radius: 2px;
  font-family: "Roboto";
}
.btnScrright {
  border-radius: 2px;
  margin-top: -15px;
}
.agg {
  padding-left: 8px !important;
  padding-right: 8px !important;
}
@media (max-width: 1200px) {
  .flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
}
.myDigo h2 {
  background: #343436;
}
::v-deep .myDigo .el-dialog__footer {
  background: #e5e9ed;
  padding-top: 15px;
}
::v-deep .el-dialog.myDigo .el-dialog__body {
  padding: 0;
}
::v-deep .el-dialog.myDigo .el-dialog__header {
  display: none;
}
.el-dialog.myDigo h2 {
  height: 58px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-left: 39px;
  padding-right: 39px;
  color: #fff;
  font-size: 18px;
  padding-top: 0;
  margin-top: 0;
  overflow: hidden;
  font-weight: normal;
  font-family: "SourceHanSansSC-regular";
}
.el-dialog.myDigo h2 i {
  font-size: 26px;
  cursor: pointer;
}
::v-deep .el-dialog.myDigo .el-dialog__body {
  text-align: left;
}
.mtright {
  margin-right: 5px;
}
::v-deep .el-upload-list--picture-card .el-upload-list__item {
  width: 70px;
  height: 56px;
}
::v-deep .el-upload-list--picture-card .el-upload-list__item div.filediv {
  width: 100%;
  height: 100%;
}
::v-deep .el-upload--picture-card {
  width: 70px;
  height: 56px;
  line-height: 66px;
}
::v-deep .el-upload__text {
  line-height: initial;
  color: #cacaca;
  margin-top: -10px;
  font-size: 12px;
}
.right10 {
  margin-left: 10px;
}
.right20 {
  margin-left: 20px;
}
::v-deep .itxt label {
  font-weight: normal;
  font-size: 12px;
}
::v-deep .itxt {
  margin-bottom: 15px;
}
::v-deep .itxtactive label {
  color: #5ac6b7;
}
.borbtoonline {
  border-bottom: 1px solid #f2f2f2;
  padding-bottom: -15px;
}
.bortopline {
  margin-top: 15px;
}
.borbtoonline .el-form-item {
  margin-bottom: 10px;
}
.formDiv {
  padding-left: 39px;
  padding-right: 39px;
}
.rowPda {
  padding-right: 10px;
}
</style>

<style>
@media (min-width: 1200px) {
  .inputTop input::-webkit-input-placeholder,
  textarea::-webkit-input-placeholder,
  select::-webkit-input-placeholder {
    font-size: 12px;
  }

  .inputTop input:-moz-placeholder,
  textarea:-moz-placeholder,
  select::-webkit-input-placeholder {
    font-size: 12px;
  }

  .inputTop input::-moz-placeholder,
  textarea::-moz-placeholder,
  select::-webkit-input-placeholder {
    font-size: 12px;
  }

  .inputTop input:-ms-input-placeholder,
  textarea:-ms-input-placeholder,
  select::-webkit-input-placeholder {
    font-size: 12px;
  }
}
</style>
